<template>
  <div class="login_wrap">
    <bg-canvas></bg-canvas>
    <div class="login_content">
      <h1 class="title">积云学院</h1>
      <!-- 表单 -->
      <el-form>
        <el-form-item style="margin-top:20px;">
          <el-input placeholder="请输入用户名"
                    v-model="username">
            <template slot="prepend">
              <el-icon class="el-icon-platform-eleme"></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码"
                    v-model="password">
            <template slot="prepend">
              <el-icon class="el-icon-platform-eleme"></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="veri_wrap">
          <el-input class="myveri"
                    placeholder="请输入验证码"
                    v-model="veri">
            <template slot="prepend">
              <el-icon class="el-icon-platform-eleme"></el-icon>
            </template>
          </el-input>
          <div class="veri">
            <veri></veri>
          </div>
        </el-form-item>
        <div class="btn_wrap">
          <el-button type="primary">忘记密码</el-button>
          <el-button type="success"
                     @click="Login">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
// import { mapActions } from 'vuex'
import { checkVeriApi, loginApi } from '../api/common'
import bgCanvas from './bgCanvas'
import Veri from './Veri'

export default {
  name: "Login",
  data () {
    return {
      username: "",
      password: "",
      veri: ""
    }
  },
  created () {
    // this.navFlagAction(false)//触发改变头部导航的actions 隐藏导航
  },
  components: { bgCanvas, Veri },
  methods: {
    // ...mapActions(["navFlagAction"]),
    async Login () {  //登录方法
      // checkVeriApi(this.veri).then(res => {
      //   console.log(res)
      //   if (res.success) {
      //     // 登录接口
      //     loginApi({
      //       userName: this.username,
      //       password: this.password
      //     }).then(res => {
      //       console.log(res)
      //       if (res.success) {
      //         this.$router.push("/home")
      //       } else {
      //         this.$alert(res.err)
      //       }
      //     })
      //   } else {
      //     this.$alert("验证码错误")
      //   }
      // })
      // async写法
      var veriRes = await checkVeriApi(this.veri)
      if (veriRes.success) {
        var loginRes = await loginApi({ userName: this.username, password: this.password })
        if (loginRes.success) {
          this.$router.push("/home")  //跳转主页
        } else {
          this.$alert(loginRes.err)
        }
      }
      if (veriRes.err) {
        this.$alert("验证码错误")
      }
    }
  }
}
</script>
<style lang="less">
.login_wrap {
  position: relative;
  background: #0d1953;
}
.login_content {
  width: 700px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  .title {
    text-align: center;
    color: white;
  }
  .el-form-item {
    padding: 0 50px;
  }
  .myveri {
    width: 450px;
  }
  .btn_wrap {
    width: 100%;

    display: flex !important;
    justify-content: space-between !important;
  }
  .veri {
    float: right;
  }
}
</style>